<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8" content="Content-Security-Policy: img-src *;">
    <script type="text/javascript">

      //1.客户端跟服务器通信
      var ws;
      var video;
      var canvas;
      var context; 
      ws = new WebSocket("wss://www.frame.cn:9501");

      var is_send = false;

  
       window.onload=function(){
              video = document.getElementById('video');
              canvas =  document.getElementById('canvas');
              context = canvas.getContext("2d");//设置绘图的环境
              draw();
              webSocket();
       }

       function webSocket(){
             ws.onopen = function(event){
                     // Web Socket 已连接上，使用 send() 方法发送数据
                    console.log(event.data)
                    is_send = true;
             };
             ws.onmessage = function (event) 
              { 
                  console.log(event.data)
                  var url = event.data;
              };
       }


       function liveVideo(){ 
              var URL = window.URL || window.webkitURL;   // 获取到window.URL对象
              navigator.getUserMedia({  
                video: true  
              }, function(stream){  
                        mediaRecorder = new MediaRecorder(stream);
                        mediaStream = stream;
                        var chunks = [], startTime = 0;
                        video.srcObject = stream;
                        video.play();
              }, function(error){  
                    console.log(error.name || error);  
              });  
        }    

        function draw(){
              context.drawImage(video,0,0);
              var sendData =  canvas.toDataURL('image/jpeg',0.1);
              console.log(is_send)
              if(is_send == true){
                    console.log(sendData);
                    ws.send(sendData); 
              } 
              setTimeout(draw,80);
       }

    

    </script>

   <body style="margin:0;padding:0;">
              <div id="box">
                    <video id="video" width="500" height="300" ></video>
                    <canvas id="canvas"   width="500" height="300"  style='float:right;border:1px solid;margin-right:100px' ></canvas>
              </div>
              <button id="live"  onclick="liveVideo()">直播</button>
              <button id="snap">截图</button>
   </body>
</html>